<template>
  <view class="eventDetails-page">
    <head-box></head-box>
    <view class="eventDetails-page-swiper">
      <view class="uni-padding-wrap">
        <view class="page-section swiper">
          <view class="page-section-spacing">
            <swiper class="swiper" :indicator-dots="false">
              <swiper-item @click="onRouterLink(details && details.moveUrl, details && details.id)">
                <view class="swiper-item">
                  <image class="_item-img" :src="details && details.movePic" mode=""></image>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </view>

    <view class="eventDetails-page-main">
      <view class="_main-header">
        <view class="moveTitle">{{ details && details.moveTitle }}</view>
        <view class="dv">
          <view class="db">
            <view class="share">
              <view class="_img" @tap="onShare">
                <image class="icon" src="/static/other/982daed473d873c994815346398149c.png"></image>
                去分享
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="_main-time">
        <view class="time">
          <view class="start start1">
            <view class="info info1">
              <view class="info2s">
                <view class="label label1">直播开始时间</view>
                <text class="value">{{ startTimeDetails }}</text>
              </view>
              <view class="end">
                <text
                  class="end-t"
                  @click="onRemind(details)"
                  :class="{ 'statusa-pointer-events': isWhetherToEnd.start === 0 }"
                >
                  {{ isWhetherToEnd.start === 1 ? '设置提醒' : isWhetherToEnd.value }}
                </text>
              </view>
            </view>
            <view class="info">
              <view class="label">直播地址</view>
            </view>
            <view
              class="values"
              @click="onRouterLink(details && details.moveUrl, details && details.id)"
            >
              {{ details && details.moveUrl }}</view
            >
          </view>
        </view>
      </view>
      <view class="_main-header"> </view>
      <view class="_main-time">
        <view class="time">
          <view class="start">
            <view class="info" v-if="details && details.contactName">
              <view class="label">分享嘉宾</view>
              <text class="value">{{ details && details.contactName }}</text>
            </view>
            <view class="info" v-if="details && details.note">
              <view class="label">嘉宾介绍</view>
              <text class="value">{{ details && details.note }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="_main-header" v-if="details && details.contactName && details && details.note">
      </view>
      <view class="_main-time" v-if="details && details.list && details.list.length">
        <view class="time">
          <view class="start">
            <view class="info">
              <view class="label">附件</view>
              <text class="value">
                <text v-for="(a, b) in details && details.list" :key="b" @click="onDownList(a)">
                  {{ a.name }}
                </text>
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="main-content-hr"></view>
    <view class="tab-botton">
      <view class="_main-tab-box"> <text>详情</text> </view>
      <view class="hr"></view>
      <view class="_main-content">
        <u-parse :html="details && details.moveDesc" v-if="details && details.moveDesc"></u-parse>
        <u-empty text="暂无活动详情" mode="list" v-else></u-empty>
      </view>
    </view>

    <tabs-box></tabs-box>
    <!-- 分享 -->
    <pointshare :show="isShow" @close="onClose"></pointshare>
  </view>
</template>
<script>
  import pointshare from '@/components/point-share/index'
  import { share1 } from '@/mixins/share-1'
  import { goLogin } from '@/common/base'
  import { getAnalyzeIDCard, onRouterLinkClick } from '@/common/type'
  import { addGpMovedate, addUserMoveVideoOperateTimes } from '@/api/move'
  export default {
    mixins: [share1],
    components: {
      pointshare,
    },
    data() {
      return {
        infoData: {},
      }
    },
    onLoad(options) {
      this.id = options.id
    },
    onShow() {},
    computed: {
      //只要月份和时间
      startTimeDetails() {
        return this.$moment(this.details && this.details.startTime).format('MM-DD HH:mm:ss')
      },

      //是否可以开启活动
      isWhetherToEnd() {
        const astring = this.$moment().valueOf() //当前系统时间
        const startTime = this.$moment(this.details && this.details.dateendTime).valueOf()
        const endTimes = this.$moment.duration(startTime - astring).as('seconds')
        //先判断当前时间与活动开始时间是否大于0
        if (endTimes >= 0) {
          return {
            start: 1,
            value: '预约进行中',
          }
        } else {
          return {
            start: 0,
            value: '预约已结束',
          }
        }
      },
    },
    methods: {
      //提醒
      onRemind(data) {
        const token = uni.getStorageSync('token')
        if (!token) {
          goLogin()
          return false
        }
        const { moveUrl, id, startTime } = data
        const startTime0 = this.$moment().format('x')
        const startTime1 = this.$moment(startTime).format('x')
        const sum = startTime1 - startTime0
        if (sum < 0) {
          uni.setStorageSync('onremindValue', id)
          this.$api.paramsShowmodal({
            content: '活动已开始,是否要进入它的直播页面',
            success: ({ confirm, cancel }) => {
              if (confirm) {
                this.onRouterLink(moveUrl, id)
              } else if (cancel) {
                this.$api.msg('请点击直播地址右侧的链接地址进入直播页面')
              }
            },
          })
        } else {
          const value = uni.getStorageSync('onremind')
          if (value) {
            this.$api.paramsShowmodal({
              content: '已存在，是否要覆盖之前的预约?',
              success: ({ confirm, cancel }) => {
                if (confirm) {
                  this.addGpMovedates({ token, moveUrl, id, startTime })
                } else if (cancel) {
                  this.$api.msg('已取消覆盖之前的预约')
                }
              },
            })
          } else {
            this.addGpMovedates({ token, moveUrl, id, startTime })
          }
        }
      },
      addGpMovedates({ token, moveUrl, id, startTime }) {
        const { userPname, userPhone, userPid, userCareer } = this.$store.state.userInfo
        const params = {
          moveId: id,
          userPname,
          userPhone,
          userPid,
          userCareer,
          userSex: getAnalyzeIDCard(userPid).sex,
        }
        if(!params.userPname.length){
          this.$api.msg('您的姓名还没有输入')
          return
        }
        this.$api.showLoading({ title: '预约中...' })
        addGpMovedate(params).then((res) => {
          if (res.code === 200) {
            this.$api.hideLoading()
            this.$api.msg(res.result)
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/myactivity/myactivity',
              })
            }, 1000)
          } else {
            if (token) {
              uni.setStorageSync('onremind', { moveUrl, id, startTime })
              setTimeout(() => {
                this.$api.msg(res.message)
              }, 1000)
            } else {
              goLogin()
            }
          }
        })
      },
      //跳外部列表
      onRouterLink(url, moveId) {
        addUserMoveVideoOperateTimes({ moveId })
          .then((res) => {
            const { code, message } = res
            if (code === 200) {
              onRouterLinkClick(url)
            } else {
              this.$api.msg(message)
            }
          })
          .catch((e) => {
            console.log(e)
          })
      },
      //下载数据
      onDownList({ url }) {
        // #ifdef  H5
        //this.saveDownImg(url)
        // #endif
        // #ifdef MP
        //this.uploadVideo(url)
        // #endif
        this.$api.msg('资源暂不能下载')
      },
      saveDownImg(url) {
        const dload = document.createElement('a')

        dload.download = '' // 设置下载的文件名，默认是'下载'

        dload.href = url

        document.body.appendChild(dload)

        dload.click()

        dload.remove() // 下载之后把创建的元素删除
        this.$api.msg('正在下载')
      },
      /**
       *视频下载保存相册
       **/
      uploadVideo(url) {
        this.$api.showLoading({ title: '下载中' })
        const downloadTask = uni.downloadFile({
          // 视频路径 测试视频demo时长有1分钟
          url,
          success: (res) => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  this.$api.hideLoading()
                  this.$api.hideLoading()
                  this.$api.msg('保存成功')
                },
                fail: () => {
                  this.$api.hideLoading()
                  this.$api.msg('保存失败，请稍后重试')
                },
              })
            }
          },
        })
        // 下载进度监听
        downloadTask.onProgressUpdate((res) => {
          if (res.progress >= 100) {
            this.$api.msg('下载成功')
          }
          console.log('下载进度' + res.progress)
          console.log('已经下载的数据长度' + res.totalBytesWritten)
          console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite)
        })
      },
    },
  }
</script>

<style lang="scss">
  .eventDetails-page {
    width: 100%;
    background-color: rgba(248, 248, 249, 1);

    .eventDetails-page-swiper {
      width: 100%;
      height: 500rpx;
      border-radius: 30rpx 30rpx 0 0;

      .uni-padding-wrap {
        height: 100%;
      }

      .page-section-spacing {
        height: 100%;
      }

      .swiper {
        height: 100%;
        padding: 10rpx;

        .swiper-item {
          width: 100%;
          height: 100%;

          ._item-img {
            width: 100%;
            height: 100%;
            border-radius: 30rpx;
          }
        }
      }
    }

    .eventDetails-page-main {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      margin-top: 10rpx;
      background-color: #fff;

      ._main-header {
        width: 100%;
        border-bottom: 1px solid #eeeeee;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 80rpx;
        padding-bottom: 30rpx;
        position: relative;
        display: flex;
        justify-content: space-between;
        .moveTitle {
          width: auto;
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #222222;
        }
        .dv {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .db {
            align-items: center;
          }
          .pageviews {
            padding-right: 30rpx;
            display: flex;
            align-items: center;
            image {
              width: 28rpx;
              height: 20rpx;
            }
            text {
              font-size: 20rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #999999;
            }
            .t1 {
              padding: 0 6rpx 0 8rpx;
            }
          }
        }
        .share {
          width: 139rpx;
          white-space: nowrap;
          height: 49rpx;
          line-height: 49rpx;
          padding: 0 20rpx;
          font-size: 24rpx;
          text-align: right;
          background: #ff5f5f;
          background-image: linear-gradient(to right, #ff6850, #ff5f5f);
          font-weight: normal;
          color: #fff;
          border-radius: 40rpx 40rpx 40rpx 0;
        }
        ._img {
          height: 100%;
          .icon {
            width: 25rpx;
            height: 25rpx;
            margin-right: 10rpx;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
      ._main-time {
        .time {
          display: flex;
          justify-content: space-between;
          padding: 0 0 0 39rpx;
          .start {
            .info {
              display: flex;
              align-items: center;
              &:first-child {
                padding: 40rpx 0 37rpx 0;
              }
              .info1 {
                align-items: baseline;
                justify-content: start;

                .label1 {
                  padding: 26rpx 0 0 0;
                }
              }
            }
            .info2s {
              display: flex;
              align-items: center;
            }
            .label {
              font-size: 26rpx;
              font-family: PingFang;
              font-weight: bold;
              color: #333333;
              line-height: 40rpx;
              position: relative;
              white-space: nowrap;
              &:after {
                content: '';
                position: absolute;
                left: -20rpx;
                top: 15rpx;
                width: 8rpx;
                height: 8rpx;
                border-radius: 50%;
                overflow: hidden;
                background: #a4a4a4;
              }
            }
            .value {
              font-size: 20rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #888888;
              line-height: 40rpx;
              padding-left: 30rpx;
              padding-right: 20rpx;
            }
          }
          .end {
            width: 234rpx;
            height: 75rpx;
            background: linear-gradient(0deg, #4e98f7, #2a7cea);
            border-radius: 38rpx;
            text-align: center;
            line-height: 75rpx;
            position: absolute;
            right: 20rpx;
            .end-t {
              width: 110rpx;
              height: 26rpx;
              font-size: 28rpx;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
              line-height: 24rpx;
            }
          }
        }
      }
    }
    .main-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 43rpx 0 39rpx;
      .left {
        .label {
          .i {
            width: 8rpx;
            height: 8rpx;
            border-radius: 50%;
            overflow: hidden;
            background: #a4a4a4;
            display: inline-block;
          }
          span {
            padding-left: 24rpx;
            width: auto;
            height: 16rpx;
            font-size: 20rpx;
            font-family: PingFang;
            font-weight: 500;
            color: #888888;
            line-height: 40rpx;
          }
          .a {
            height: 21rpx;
            font-size: 22rpx;
            font-family: PingFang;
            font-weight: 500;
            color: #333333;
            line-height: 40rpx;
            padding-left: 19rpx;
          }

          padding-bottom: 29rpx;

          &:first-child {
            padding-top: 34rpx;
          }
        }
      }
      .right {
        .image {
          display: inline-block;
          background: #eef4ffff;
          border-radius: 50%;
          width: 61rpx;
          height: 61rpx;
          line-height: 70rpx;
          text-align: center;
          image {
            display: inline-block;
            vertical-align: middle;
            width: 35rpx;
            height: 35rpx;
          }
        }
      }
    }
    .tab-botton {
      ._main-tab-box {
        text-align: center;
        text {
          width: 58rpx;
          height: 29rpx;
          font-size: 30rpx;
          font-family: PingFang;
          font-weight: bold;
          color: #ff3d5c;
          line-height: 44rpx;
          position: relative;
          &:after {
            position: absolute;
            content: '';
            bottom: -10rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 37rpx;
            height: 5rpx;
            background: #ff3d5c;
            border-radius: 2rpx;
          }
        }
      }
      .hr {
        width: 100%;
        height: 2rpx;
        background: #eeeeee;
        margin-top: 2rpx;
      }
      ._main-content {
        padding: 36rpx;
        height: 100%;
        font-size: 24rpx;
        font-family: PingFang;
        font-weight: 400;
        color: #666666;
        line-height: 50rpx;
        overflow: hidden;
        overflow-y: scroll;
      }
      .count-down {
        text-align: center;
        padding-top: 54rpx;
        padding-bottom: 51rpx;
        text {
          width: 149rpx;
          height: 27rpx;
          font-size: 28rpx;
          font-family: PingFang;
          font-weight: bold;
          color: #222222;
          line-height: 50rpx;
        }
        /deep/.u-countdown {
          .u-countdown-time {
            padding: 9rpx 10rpx 13rpx 9rpx;
          }
          .u-countdown-colon {
            margin: 0 9rpx 0 14rpx;
            width: 4rpx;
            height: 14rpx;
            font-size: 28rpx;
            font-family: PingFang;
            font-weight: 400;
            color: #222222;
            line-height: 50rpx;
          }
        }
      }
      .btns {
        width: 100%;

        box-sizing: border-box;
        padding: 10rpx 40rpx;
        padding-bottom: 63rpx;
        .status1,
        .status2,
        .status3 {
          font-size: 30rpx;
          border-radius: 40rpx;
          color: #fff;
          //background-color: #2678eb;
          //background-image: linear-gradient(#569cff, #2678eb);
          border: none;
        }
        .status1,
        .status2,
        .status3 {
          width: auto;
          height: 74rpx;
          border-radius: 37rpx;
          text {
            width: 83rpx;
            height: 27rpx;
            font-size: 28rpx;
            font-family: PingFang;
            font-weight: bold;
            color: #ffffff;
            line-height: 50rpx;
          }
        }
      }
    }
  }
  .status1 {
    background: $status3f8fee;
    border: transparent;
  }
  .status2 {
    background: $statusffa800;
    border: 1px solid $statusffa800;
  }
  .status3 {
    background: $statusecff700;
    border: transparent;
  }
  .statusa-pointer-events {
    pointer-events: none;
  }
  .values {
    font-size: 20rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #888888;
    line-height: 40rpx;
    word-wrap: break-word;
    display: block;
    width: 650rpx;
  }
</style>
